////
/// @group window-splitter
////

@use "sass:map";
@use "../utils";
@use "../divider/divider";
@use "../interaction/interaction";
@use "../transition/transition";

/// Set to `true` to disable generating any styles
/// @type Boolean
$disable-everything: false !default;

/// Set to `true` to disable the horizontal `WindowSplitter` styles.
/// @type Boolean
$disable-horizontal: false !default;

/// Set to `true` to disable the vertical `WindowSplitter` styles.
/// @type Boolean
$disable-vertical: false !default;

/// Set to `true` to disable the reversed `WindowSplitter` styles.
/// @type Boolean
$disable-reversed: false !default;

/// Set to `true` to disable the `position: absolute` styles
/// @type Boolean
$disable-absolute-position: false !default;

/// Set to `true` to disable the inactive `background-color` styles.
/// @since 6.4.0
/// @type Boolean
$disable-inactive-background-color: false !default;

/// The default `WindowSplitter` draggable area.
/// @type Number
$size: 1rem !default;

/// The default `WindowSplitter` visible size (`background-color`).
/// @type Number
$background-size: 0.25rem !default;

/// The default `background-color` for the `WindowSplitter` while being
/// interacted with by the user.
/// @type Color
$background-color: interaction.get-var(focus-color) !default;

/// An optional `background-color` to use while the
/// @type Color
$inactive-background-color: divider.get-var(color) !default;

/// The default `z-index` for the `WindowSplitter`.
/// @type Number
$z-index: 30 !default;

/// The available configurable css variables and mostly used internally for the
/// `get-var`, `set-var`, and `use-var` utils.
/// @type List
$variables: (
  size,
  background-size,
  x,
  y,
  z,
  position,
  background-color,
  inactive-background-color,
  opacity
);

/// @param {String} name - The supported variable name
/// @param {any} fallback [null] - An optional fallback value
/// @returns {String} a `var()` statement
@function get-var($name, $fallback: null) {
  $var: utils.get-var-name($variables, $name, "window-splitter");
  // window-splitter variables don't make much sense to set globally
  @if $name != background-color and not $fallback {
    $fallback: 0;
  }
  @if $fallback {
    @return var(#{$var}, #{$fallback});
  }

  @return var(#{$var});
}

/// @param {String} name - The supported variable name
/// @param {any} value - The value to set the variable to. Supports `null` which
/// will just be a no-op.
@mixin set-var($name, $value) {
  @if $value {
    #{utils.get-var-name($variables, $name, "window-splitter")}: #{$value};
  }
}

/// @param {String} property - The css property to apply the variable to
/// @param {String} name [$property] - The supported variable name
/// @param {any} fallback [null] - An optional fallback value if the variable
/// has not been set
@mixin use-var($property, $name: $property, $fallback: null) {
  #{$property}: get-var($name, $fallback);
}

@mixin variables {
  @if not $disable-everything {
    @include set-var(size, $size);
    @include set-var(background-size, $background-size);
    @if $background-color != interaction.get-var(focus-color) {
      @include set-var(background-color, $background-color);
    }
    @if not
      $disable-inactive-background-color and
      $inactive-background-color !=
      divider.get-var(color)
    {
      @include set-var(background-color, $inactive-background-color);
    }
  }
}

/// Generates all the styles based on feature flags.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    $pseudo-selectors: if(
        not $disable-inactive-background-color,
        "&::before, ",
        ""
      ) +
      "&::after";

    @include utils.optional-layer(window-splitter, $disable-layer) {
      .rmd-window-splitter {
        background-color: transparent;
        border: 0;
        inset: 0;
        outline: 0;
        padding: 0;
        position: fixed;
        transform: translate3d(get-var(x, 0), get-var(y, 0), get-var(z, 0));
        z-index: $z-index;

        #{$pseudo-selectors} {
          content: "";
          inset: 0;
          position: absolute;
        }

        &::after {
          @include use-var(
            background-color,
            $fallback: if(
                $background-color == interaction.get-var(focus-color),
                $background-color,
                null
              )
          );
          @include use-var(opacity);

          transition: opacity transition.$linear-duration;
        }

        @if not $disable-inactive-background-color {
          &--no-inactive-bg::before {
            display: none;
          }

          &::before {
            @include use-var(
              background-color,
              inactive-background-color,
              if(
                $inactive-background-color == divider.get-var(color),
                $inactive-background-color,
                null
              )
            );

            pointer-events: none;
          }
        }

        @if not $disable-horizontal {
          &--h {
            @include set-var(x, get-var(position));
            @include use-var(width, size);

            cursor: col-resize;

            #{$pseudo-selectors} {
              @include use-var(width, background-size);
            }

            @include utils.rtl {
              @include set-var(x, utils.negate-var(get-var(position)));
            }
          }

          @if not $disable-reversed {
            &--hr {
              @include set-var(
                x,
                calc(100dvw - get-var(size) - get-var(position))
              );

              #{$pseudo-selectors} {
                margin-left: auto;
              }

              @include utils.rtl {
                @include set-var(
                  x,
                  calc(-100dvw + get-var(size) + get-var(position))
                );

                #{$pseudo-selectors} {
                  margin-left: 0;
                  margin-right: auto;
                }
              }
            }
          }
        }

        @if not $disable-vertical {
          &--v {
            @include set-var(y, get-var(position));
            @include use-var(height, size);

            cursor: row-resize;
            width: 100%;

            #{$pseudo-selectors} {
              @include use-var(height, background-size);
            }
          }

          @if not $disable-reversed {
            &--vr {
              @include set-var(
                y,
                calc(100dvh - get-var(size) - get-var(position))
              );

              #{$pseudo-selectors} {
                transform: translateY(
                  calc(get-var(size) - get-var(background-size))
                );
              }
            }
          }
        }

        @if not $disable-absolute-position {
          &--a {
            position: absolute;
          }
        }

        &--dragging {
          @include set-var(opacity, 1);

          // set to important so that the `.rmd-dragging` styles do not affect
          // window splitter
          pointer-events: auto !important;
        }

        @include utils.mouse-hover {
          @include set-var(opacity, 1);
        }
        @include utils.keyboard-only {
          // Do not use `:focus-visible` here since since it'll still be active
          // after dragging with a mouse until the user clicks something else. The
          // `--dragging` state handles that part
          &:focus {
            @include set-var(opacity, 1);
          }
        }
      }
    }
  }
}
